<template>
  <div class="wrap">
    <section class="result-wrap">
      <header class="tools">
        <el-checkbox
          :indeterminate="indeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div class="group">
          <button @click="exportPatent">
            <i class="iconfont icon-piliangxiazai"></i><span>导出</span>
          </button>
          <button title="高亮模式" @click.stop="showHighlightMode">
            <i class="iconfont4 icondengpao-liang"></i><span>高亮模式</span>
          </button>
          <button
            v-if="ctNavID === 'patent' || ctNavID === 'paper'"
            title="分析"
            @click="toAnalysis"
          >
            <i class="iconfont icon-fenxi"></i><span>分析</span>
          </button>
          <el-switch
            v-if="
              ctNavID === 'patent' ||
                ctNavID === 'paper' ||
                ctNavID === 'project'
            "
            v-model="defaultTransSwitch"
            active-text="翻译"
            class="trans-switch"
            @change="handleChangeDeftrans"
          ></el-switch>
        </div>
        <div class="mode-wrap">
          <!-- 切换模式 -->
          <el-select
            v-model="mode"
            placeholder="请选择"
            class="select mode-select"
          >
            <el-option
              v-for="(item, index) in modeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- 切换排序 -->
          <el-select
            v-model="sort"
            placeholder="请选择"
            class="select sort-select"
            @change="changeSort"
          >
            <el-option
              v-for="(item, index) in sortOptions"
              :key="index"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </header>
      <div class="mode-box">
        <div class="mode" :class="{ mr: showDetail }">
          <p
            v-if="!dataList.result || dataList.result.length == 0"
            style="line-height:100px;text-align:center;color:#888"
          >
            暂无数据
          </p>
          <!-- 图文模式 -->
          <modeA
            v-if="mode === 0"
            :data="dataList"
            :ctNavID="ctNavID"
            :checkAllVal="checkAllVal"
            @checkBoxList="checkBoxList"
            @currentPn="getCurrentPn"
          />
          <!-- 列表模式 -->
          <modeB
            v-if="mode === 1"
            :data="dataList"
            :ctNavID="ctNavID"
            :checkAllVal="checkAllVal"
            @checkBoxList="checkBoxList"
            @currentPn="getCurrentPn"
          />
        </div>
        <section v-show="showDetail">
          <div class="toggle-btn" @click="showDetail = false">
            <i class="el-icon-arrow-right"></i>
          </div>
        </section>
      </div>
    </section>
    <!-- 分页 -->
    <div class="pagination2">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="watchCurrentPage"
        :current-page.sync="currentPage"
        small
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 高亮模式 -->
    <highlightSettings ref="highlightSettings" />
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import highlightSettings from "@/views/modules/DataCenter/components/highlightSettings";
import ModeA from "./mode/ModeA";
import ModeB from "./mode/ModeB";
import {
  patentSortOptions,
  literatureSortOptions,
  achievementsSortOptions,
  projectsSortOptions,
  standardSortOptions
} from "./sortOptions.js";
export default {
  props: {
    ctNavID: {
      type: String
    },
    dataList: {
      type: Object
    },
    paramsSq: {
      type: String
    },
    searchTxt: {
      type: String
    },
    modeVal: {
      type: Number
    },
    curPageSize: {
      type: Number
    },
    searchSort:{
      type:Number
    }
  },
  components: {
    highlightSettings,
    ModeA,
    ModeB
  },
  computed: {
    ...mapState(["defaultTrans"])
  },
  data() {
    return {
      checkAll: "",
      checkAllVal: false,
      indeterminate: false,
      checkList: [],
      mode: this.modeVal,
      currentPn: "",
      showDetail: false,
      scrollOps: {},
      reloadBox: true,
      modeOptions: [
        {
          label: "图文模式",
          value: 0
        },
        {
          label: "列表模式",
          value: 1
        }
      ],
      sort: 1,
      sortOptions: [],
      defaultTransSwitch: true, // 是否开启默认翻译
      // 分页
      total: 0,
      currentPage: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 10,
      // page: [
      //   {
      //     value: 5,
      //     label: "5"
      //   },
      //   {
      //     value: 10,
      //     label: "10"
      //   },
      //   {
      //     value: 20,
      //     label: "20"
      //   },
      //   {
      //     value: 50,
      //     label: "50"
      //   },
      //   {
      //     value: 100,
      //     label: "100"
      //   }
      // ],
      // ifSrc: ""
    };
  },
  watch: {
    ctNavID() {
      this.init();
      this.total = 0;
      this.currentPage = 1;
    },
    dataList() {
      // console.log("dataList",this.currentPage);
      this.total = this.dataList.total || 0;
    },
    mode() {
      this.$emit("modeChange", this.mode);
      this.resetCheckAll();
    }
  },
  mounted() {
    // console.log("this.dataList", this.dataList);
    if (Object.keys(this.dataList).length > 0) {
      this.total = this.dataList.total || 0;
      this.currentPage = parseInt(this.dataList.pageNum || 0) + 1;
    }
    this.$Bus.$on("resetPageSize", val => {      
      this.currentPage = val;
    });
  },
  methods: {
    init() {
      this.pageSize = this.curPageSize;
      this.$Bus.$on("getDcCheckBoxlist", list => {
        this.checkList = list;
        this.checkAll = this.pageSize === list.length;
        this.indeterminate = list.length > 0 && list.length < this.pageSize;
      });
      if (this.ctNavID == "patent") {
        this.sortOptions = patentSortOptions;
      } else if (this.ctNavID == "paper") {
        this.sortOptions = literatureSortOptions;
      } else if (this.ctNavID == "achieve") {
        this.sortOptions = achievementsSortOptions;
      } else if (this.ctNavID == "project") {
        this.sortOptions = projectsSortOptions;
      } else if (this.ctNavID == "standard") {
        this.sortOptions = standardSortOptions;
      }
      // this.sort = 1;
      this.sort = this.searchSort;
    },
    // 跳转新界面
    toAnalysis() {
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: "Analysis",
          query: {
            type: this.ctNavID
          }
        });
        window.open(routerUrl.href, "_blank");
      });
    },
    watchPageSize(val) {
      this.handleCheckAllChange(false);
      this.$Bus.$emit("backTop", true);
      this.$Bus.$emit("pageSize", val);
    },
    watchCurrentPage(val) {
      this.handleCheckAllChange(false);
      this.currentPage = val;
      this.$Bus.$emit("backTop", true);
      this.$Bus.$emit("currentPage", val);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.$Bus.$emit("pageSize", val);
    },
    changeSort(id) {
      this.handleCheckAllChange(false);
      let item = this.sortOptions.find(it => {
        return it.id == id;
      });
      let arr = [];
      if (item.sort instanceof Array) {
        arr = item.sort;
      } else {
        arr.push(item.sort);
      }
      this.$Bus.$emit("searchSortChange", item.id);
      this.$Bus.$emit("changeSort", arr);
    },
    // 全选
    checkBoxList(list) {
      this.checkList = list;
      this.checkAll = this.pageSize === list.length;
      this.indeterminate = list.length > 0 && list.length < this.pageSize;
    },
    handleCheckAllChange(val) {
      this.checkAllVal = val;
      this.indeterminate = false;
    },
    // 导出专利
    exportPatent() {
      if (this.checkList.length <= 0) {
        this.$message({
          type: "warning",
          message: "请至少勾选一条数据"
        });
        return;
      }
      let id = this.checkList.map(v => v.id); //id 是一个集合 数组格式
      let parms = {};
      if (this.ctNavID == "patent") {
        parms = {
          query: {
            terms: {
              pn: id
            }
          }
        };
      } else {
        parms = {
          query: {
            terms: {
              id: id
            }
          }
        };
      }
      axios({
        method: "post",
        url: this.$Url.search.commonExportExcel, //接口陈坤待开发
        data: {
          //这里需要改造 为每个业务类型都有一个标识
          dbid: this.ctNavID, //type是业务标识 字符换格式
          ...parms
        },
        responseType: "blob"
      })
        .then(res => {
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          let filename =
            res.headers["content-disposition"].split(";")[1].split("=")[1] ||
            "";
          let a = document.createElement("a");
          a.style.display = "none";
          a.href = URL.createObjectURL(blob);
          a.setAttribute("download", filename);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        })
        .catch(err => {});
    },
    // 高亮模式
    showHighlightMode() {
      this.$refs["highlightSettings"].init();
    },
    //
    getCurrentPn(pn) {
      if (this.currentPn === pn) {
        this.currentPn = "";
        this.showDetail = false;
      } else {
        this.currentPn = pn;
        this.showDetail = true;
      }
      this.$refs.detailBox.scrollTop = 0;
      // 刷新组件页面
      this.reloadBox = false;
      this.$nextTick(() => {
        this.reloadBox = true;
      });
    },
    // 重置全选
    resetCheckAll() {
      this.checkAll = "";
      this.checkAllVal = false;
      this.indeterminate = false;
      this.checkList = [];
    },
    // 切换翻译开关
    handleChangeDeftrans() {
      this.$store.commit("setDefaultTrans", this.defaultTransSwitch);
    }
  },

  beforeMount() {
    this.init();
    this.$store.commit("setDefaultTrans", this.defaultTransSwitch);
    // this.defaultTransSwitch = this.defaultTrans
    // 重置全选
    this.resetCheckAll();
    this.scrollOps = {
      vuescroll: {
        mode: "native",
        sizeStrategy: "number",
        detectResize: true,
        wheelScrollDuration: 200
      },
      scrollPanel: {
        initialScrollX: false,
        initialScrollY: false,
        scrollingX: false,
        scrollingY: true,
        speed: 1000
      },
      rail: {
        size: "6px",
        // gutterOfEnds: '10px',
        gutterOfSide: "10px",
        keepShow: true
      },
      bar: {
        onlyShowBarOnScroll: false,
        keepShow: true,
        background: "#adc2ca",
        size: "6px"
      }
    };
  },

  destroyed() {
    // this.$Bus.$off('data')
    // this.$Bus.$off('pageSize')
    // this.$Bus.$off('currentPage')
    // this.$Bus.$off('backTop')
  }
};
</script>

<style lang="scss" scoped>
body {
  margin: 0;
}
// .wrap {
//   position: relative;
//   display: flex;
//   .result-wrap {
//     flex: 1;
//   }
// }
header {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  height: 50px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid $color2;
  background-color: $color2;
  .group {
    flex: 2.2;
    display: inline-flex;
    align-items: center;
    padding-left: 20px;
    button {
      // width: 138px;
      // flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      padding-right: 20px;
      border: none;
      color: $color30;
      background: none;
      outline: 0;
      cursor: pointer;
      i {
        display: block;
        margin-right: 10px;
        font-size: 23px;
        color: $mainColor;
        overflow: hidden;
        &.icon-fenxi {
          font-size: 26px;
        }
        &.icon-chuangjianjianshi {
          font-size: 26px;
        }
      }
      &.disabled {
        // color: $color30;
        cursor: not-allowed;
      }
      // &:hover {
      //   color: $mainColor;
      //   i {
      //     color: $mainColor;
      //   }
      // }
      .img1 {
        display: inline-block;
        height: 19px;
        margin-right: 10px;
      }
      > span {
        font-size: 12px;
        color: $color6;
      }
    }
    .trans-switch {
      &.is-checked {
        ::v-deep {
          .el-switch__core {
            border-color: $mainColor;
            background-color: $mainColor;
          }
        }
      }
      ::v-deep {
        .el-switch__label {
          > span {
            font-size: 12px;
            color: $color6;
          }
          &.is-active {
            > span {
              color: $mainColor;
            }
          }
        }
      }
    }
  }
  .mode-wrap {
    // flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 27%;
    .select {
      width: 48%;
      min-width: 150px;
      max-width: 200px;
      height: 34px;
      background-color: $color46;
      overflow: hidden;
      &:last-of-type {
        margin-left: 4%;
      }
      ::v-deep {
        .el-input__inner {
          background-color: $color46;
        }
      }
    }
  }
}
.mode-box {
  position: relative;
  // display: flex;
  // height: calc(100vh - 60px - 20px - 40px - 60px - 51px);
  // overflow-y: auto;
  .mode {
    // flex: 1;
    // height: calc(100vh - 60px - 60px - 60px - 51px - 50px - 1.6rem);
    background-color: $color2;
    overflow-y: auto;
    // transition: margin .3s linear;
    &.mr {
      margin-right: 50%;
    }
  }
  .detail-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: calc(100vh - 60px - 51px - 50px - 0.7rem);
    border-left: 1px solid $color1;
    background-color: $color2;
    overflow-y: auto;
    .iframe-box {
      width: 100%;
      height: 100%;
    }
  }
  .toggle-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 20px;
    height: 44px;
    line-height: 44px;
    margin-top: -22px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    font-size: 18px;
    color: $mainColor;
    background-color: $color152;
    cursor: pointer;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
